<!--Created by yangzhiqiang -->
<template>
    <div class="show_device">
        <div class="row">
            <div class="col-lg-12">
                <h4 class="page-header">设备管理 ({{tableDataLength}}台设备)</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="row panel-body">
                    <div class="col-lg-12">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="imsi：">
                                <el-input v-model="imsi" placeholder="imsi"></el-input>
                            </el-form-item>
                             <el-form-item label="imei：">
                                <el-input v-model="imei" placeholder="imei"></el-input>
                            </el-form-item>
                             <el-form-item label="厂商">
                                <el-input v-model="manufacture" placeholder="生产厂商"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="onSubmit" size="small">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <template>
            <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" 
            style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="35">
                </el-table-column>
                <el-table-column prop="id" label="id" width="55">
                </el-table-column>
                <el-table-column prop="model" label="型号" >
                </el-table-column>
                <el-table-column prop="detail.operator" label="系统" >
                </el-table-column>
                <el-table-column prop="detail.ip" label="IP" >
                </el-table-column>
                <el-table-column prop="imei" label="IMEI">
                </el-table-column>
                <el-table-column prop="imsi" label="IMSI">
                </el-table-column>
                <el-table-column prop="detail.country" label="地区" >
                </el-table-column>
                <el-table-column prop="detail.timezone" label="时区" >
                </el-table-column>
                <el-table-column prop="detail.appCount" label="应用数" >
                </el-table-column>
                <el-table-column prop="detail.locationCount" label="位置数" >
                </el-table-column>
                <el-table-column prop="detail.wifiCount" label="wifi数" >
                </el-table-column>
                <el-table-column prop="detail.contactsCount" label="联系人数" >
                </el-table-column>
                <el-table-column prop="detail.calllogCount" label="通话记录数">
                </el-table-column>
                <el-table-column prop="detail.smsCount" label="短信记录数">
                </el-table-column>
                <el-table-column prop="handTime" label="采集时间" >
                </el-table-column>
                <el-table-column label="查看详情" fixed="right" >
                    <template scope="scope">
                        <el-button @click="handleClick" type="text" size="small">详细</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paging_delet_relative">
                <div class="delete_absolute">
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
                    <el-button @click="toggleSelection()">关联全删除</el-button>
                </div>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10"
                        :current-page.sync="currentPage"  layout="total, prev, pager, next" :total="tableDataLength">
                    </el-pagination>
                </div>
            </div> 
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
    const probeApiV100 = '/probe/api/v100/';
    const dataDeviceList = probeApiV100 + 'data/device/list';
    import Mock from 'mockjs'
    export default {
        name: 'show_device',
        data() {
            return {
                //todo 这里是data区域
                currentPage: 1,
                tableData: [],
                dataDeviceData: {},
                multipleSelection: [],
                tableDataLength: 0,
                imgList: [],
                pageSizes: 10,
                imsi: '',
                imei: '',
                manufacture: ''
            }
        },
        components: {
            //TODO 添加子组件
        },
        computed: {
            //TODO 计算区
        },
        methods: {
            //TODO 方法区
            onSubmit () {
                let imsi = this.imsi;
                let imei = this.imei;
                let manufacture = this.manufacture;
                this.fetchData (1,10,imsi,imei,manufacture,4);
            },
            handleSizeChange(rows) {
                this.pageSizes = rows;
                this.fetchData (1,rows,1,2,3,4);
            },
            handleCurrentChange(page) {
                let rows = this.pageSizes;
                this.currentPage = page;
               // console.log(page)
                this.fetchData (page,rows,1,2,3,4);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleClick() {
                console.log(1);
            },
            deleteRow(index, rows) {
                console.log(index, rows)
               // rows.splice(index, 1);
                // if (rows) {
                //     rows.forEach(row => {
                //         this.$refs.multipleTable.toggleRowSelection(row);
                //     });
                // } else {
                //     this.$refs.multipleTable.clearSelection();
                // }
            },
            fetchData (page,rows,imsi,imei,manufacture,udid) {
                var page = this.currentPage || page || 1;
                var rows  = this.pageSizes || rows || 10;
                var imsi = this.imsi || imsi || 1;
                var imei = this.imei || imei || 2;
                var manufacture = this.manufacture || manufacture || 3;
                var udid = udid || 4;
                this.$axios.post(dataDeviceList, {
                        page:page,
                        rows:rows,
                        imsi:imsi,
                        imei:imei,
                        manufacture:manufacture,
                        udid:udid
                }).then(res=>{
                    //console.log(Mock.mock(res.data.data));
                    let mockData = Mock.mock(res.data.data);
                    this.dataDeviceData = mockData;                
                    let dataDeviceList = mockData.pageInfo.list;
                    this.tableData = dataDeviceList.slice((page-1)*rows,page*rows);
                    this.tableDataLength = dataDeviceList.length;
                   // console.log(this.tableDataLength);

                    //this.dataDeviceData = res.data.data;                
                    // let dataDeviceList = res.data.data.pageInfo.list;
                    // this.tableData = dataDeviceList.slice(0,rows);
                    // this.tableDataLength = dataDeviceList.length;
                }).catch(err => { console.log(err) })
            }
        },
        created () {
            this.fetchData();
        },
        mounted: function () {
            //TODO 函数执行区域

        }
    }
</script>
<style lang="scss" scoped>
    .el-form-item {
        margin-bottom: 0px; 
    }
    .paging_delet_relative{
        position: relative;
        width: 100%;
        margin-top: 20px;
    }
    .block{
        position: absolute;
        top:0;
        right:0;
    }
    .el-button--success {
        color: #fff;
        background-color: #13c4a5;
        border-color: #13c4a5;
    }
</style>
